<template>
    <div class="home-page" id="home-page">
        <!-- 顶部搜索logol栏 -->
        <search-sub :pageType="0"></search-sub>
        <div class="wrap" v-loading="showPage">
            <!-- 顶部轮播 与 个人中心 -->
            <div class="cover-box flex">
                <!-- 轮播图 -->
                <div class="banner-box">
                    <div class="swiper-container" id='topSwiper'>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item, index) in swiperList" :key="index" @click='toSwiperPage(item)'>
                                <div class="swiper-img">
                                    <img :src="item.image_pc" />
                                    <!-- <base-img :src="item.image_pc"></base-img> -->
                                </div>
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="info-box flex-y flex-between">
                    <div class="info-head flex-y flex-center">
                        <div v-if="!clientAccessToken">
                            <div class="wel-box fs-12 flex-center">
                                <img class="avatar-img" src="../../assets/icon/icon_defaultAvatar.png" alt="" />
                                <span>Hi，欢迎来到供货平台</span>
                            </div>
                            <div @click="toPage(1)" class="login-btn flex-center fs-14 mt-10 fw-bold">
                                快速登录/注册
                            </div>
                        </div>
                        <template v-else>
                            <div v-if="userInfo.is_auth == 1" class="company flex" @click="toPage(2)">
                                <img class="attestation-img" src="../../assets/icon/icon_enterprise.png" alt="" />
                                <div class="box">
                                    <div class="name fw-bold fs-14 over-ellipsis">
                                        {{ userInfo.company_name }}
                                    </div>
                                    <div class="desc flex-center">
                                        <img class="attestation-icon" src="../../assets/icon/icon_attrs.png" alt="" />
                                        <span class="text fs-12">已认证</span>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="attestation flex-center">
                                <template v-if='userInfo.is_auth == 0 && userInfo.company_id == 0'>
                                    <img class="attestation-img" src="../../assets/icon/icon_enterprise.png" alt="" />
                                    <div class="box flex-y flex-center">
                                        <div class="text fs-14">未认证用户</div>
                                        <div class="btn flex-center fs-12" @click="toPage(2)">
                                            去认证
                                        </div>
                                    </div>
                                </template>
                                <template v-if='userInfo.is_auth == 0 && userInfo.company_id > 0'>
                                    <img class="attestation-img" src="../../assets/icon/icon_enterprise.png" alt="" />
                                    <div class="box flex-y flex-center">
                                        <div class="text fs-14">{{ userInfo.company_name }}</div>
                                        <div class="btn flex-center fs-12" @click="toPage(2)">
                                            资料审核中...
                                        </div>
                                    </div>
                                </template>
                                <template v-if='userInfo.is_auth == 2 && userInfo.company_id > 0'>
                                    <img class="attestation-img" src="../../assets/icon/icon_enterprise.png" alt="" />
                                    <div class="box flex-y flex-center">
                                        <div class="text fs-14">{{ userInfo.company_name }}</div>
                                        <div class="btn flex-center fs-12" @click="toPage(2)">
                                            认证不通过，重新认证
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                    <div class="info-nav">
                        <div class="nav-head flex-between">
                            <div class="title fs-16">我的订单</div>
                            <div class="text fs-14 text-font" @click="toPage(3)">
                                全部订单<i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                        <div class="nav-list mt-10 flex-between">
                            <div class="nav-item flex-y flex-center" v-for="(item, index) in orderList" :key="item.id" @click="toOrder(index)">
                                <img class="nav-img" :src="item.imgPath" alt="" />
                                <span class="nav-text fs-14">{{
                                    item.title
                                }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-fun flex-center flex-y flex-between">
                        <div class="info-flex flex-between">
                            <div class="fun-item flex-y flex-center" v-for="(item, index) in elseList" :key="item.id" @click="toElse(index, 1)">
                                <img class="fun-img" :src="item.imgPath" alt="" />
                                <span class="fun-text fs-14">{{
                                    item.title
                                }}</span>
                            </div>
                        </div>
                        <div class="info-flex flex-between">
                            <div class="fun-item flex-y flex-center" v-for="(item, index) in elseListTwo" :key="item.id" @click="toElse(index, 2)">
                                <img class="fun-img" :src="item.imgPath" alt="" />
                                <span class="fun-text fs-14">{{
                                    item.title
                                }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分类导航 -->
            <div class="nav-lists mt-12">
                <div class="nav-item" v-for="(nav,index) in cateList" :key="index" @click="toCatePage(index,nav.category_id)">
                    <div class="nav-img">
                        <base-img :src="nav.image"></base-img>
                    </div>
                    <p class="nav-text fs-16">{{ nav.name }}</p>
                </div>
            </div>
            <!-- 弹窗商品 与 前两个推荐导航 -->
            <div class="banners-box mt-12 flex">
                <div class="erect-banner">
                    <div class="swiper-container" id='advSwiper'>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item, index) in advSwiperList" :key="index" @click='toGoodsDetail(item.goods_id)'>
                                <div class="banner-img">
                                    <img :src="item.image_pc" />
                                    <!-- <base-img :src="item.image_pc"></base-img> -->
                                </div>
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="across-banner-box flex-y" v-if='advGoods.length > 0'>
                    <div class="across-banner flex-y flex-between" v-for="(item,index) in advGoods" :key="index">
                        <div class="banner-head">{{ item.name }}</div>
                        <div class="banner-list">
                            <div class="banner-item flex-center" v-for="(goodsItem,goodsIndex) in item.goodlist" :key="goodsIndex"
                                 @click='toGoodsDetail(goodsItem.goods_id)'>
                                <div class="goods-img">
                                    <base-img :src="goodsItem.goods_image"></base-img>
                                </div>
                                <div class="bottom-box flex-center">
                                    <div class="price">¥{{ goodsItem.goods_price_min }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="across-banner-box flex-y" v-else>
                    <div class="across-banner-item" v-for="(item,index) in 2" :key="index"></div>
                </div>
            </div>
            <!-- 推荐商品 -->
            <div class="menu-box" v-for="(item,index) in recommandList" :key="index">
                <div class="menu-head flex-between" @click="toMoreGoodsList(item.id,item.name)">
                    <div class="title fs-16">·{{item.name}}·</div>
                    <div class="more fs-12">查看更多<i class="el-icon-arrow-right"></i></div>
                </div>
                <div class="menu-list">
                    <div v-for="(goodsItem,goodsIndex) in item.goodlist" :key="goodsIndex" @click='toGoodsDetail(goodsItem.goods_id)'>
                        <goods-item :item="goodsItem"></goods-item>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="foot">
            <div class="scan-box flex-center">
                <div class="img-box flex-center">
                    <img class="scan-img" :src="siteObj.wxapp_code" alt="" />
                </div>
                <div class="scan-text fs-16 flex-y flex-center">
                    <span class="text">扫一扫</span>
                    <span class="text">小程序采购</span>
                </div>
            </div>
            <div class="version flex-y fw-bold fs-18 flex-center">
                <div class="text">
                    {{ siteObj.copyright }} {{siteObj.site_name}} {{ siteObj.icp }}
                </div>
            </div>
        </div>
        <!-- 随机海报弹窗 -->
        <div class="poster-modal" :class="[showModal ? 'modal-show':'']"></div>
        <div class="poster-modal-wrap animated" :class="zoomClass" v-if='showModal'>
            <div class="modal-img" @click='toGoodsDetail(randomPosterId,1)'>
                <base-img :src="randomPoster"></base-img>
            </div>
            <i class="el-icon-circle-close close" @click='close'></i>
        </div>
    </div>
</template>
<script>
import {
    indexHeader,
    indexMiddle,
    posterRandom,
} from '../../api/home';
import {
    userInfo,
} from '../../api/base';
import { siteInfo } from '../../api/base';
import "swiper/css/swiper.css";
import Swiper from "swiper";
import SearchSub from "@/components/SearchSub.vue";
import GoodsItem from "@/components/GoodsItem.vue";
import BaseImg from '@/components/BaseImg.vue';
const quicklyBuyImg = require('../../assets/img/quickly-buy.png');
const moreImg = require('../../assets/img/more.png')
export default {
    components: {
        GoodsItem,
        SearchSub,
        BaseImg,
    },
    data() {
        return {
            clientAccessToken: '',
            userInfo: {},
            randomPoster: '',
            randomPosterId: '',
            showModal: false,
            zoomClass: 'zoomIn',

            swiperList: [],
            cateList: [],

            advSwiperList: [],
            advGoods: [],
            recommandList: [],

            orderList: [
                {
                    id: 0,
                    title: "待审核",
                    imgPath: require("../../assets/icon/icon_auditing.png"),
                    path: "/user/order/audit",
                },
                {
                    id: 1,
                    title: "待配送",
                    imgPath: require("../../assets/icon/icon_waitDelivery.png"),
                    path: "/user/order/delivery",
                },
                {
                    id: 2,
                    title: "配送中",
                    imgPath: require("../../assets/icon/icon_delivering.png"),
                    path: "/user/order/delivery_in",
                },
                {
                    id: 3,
                    title: "已完成",
                    imgPath: require("../../assets/icon/icon_overDeliver.png"),
                    path: "/user/order/received",
                },
            ],
            elseList: [
                {
                    id: 0,
                    title: "我的账单",
                    imgPath: require("../../assets/icon/icon_bill.png"),
                    path: "/user/bill",
                },
                {
                    id: 1,
                    title: "收货地址",
                    imgPath: require("../../assets/icon/icon_address.png"),
                    path: "/user/address",
                },
                {
                    id: 2,
                    title: "我的收藏",
                    imgPath: require("../../assets/icon/icon_collection.png"),
                    path: "/user/collect",
                },
            ],
            elseListTwo: [
                {
                    id: 3,
                    title: "我的足迹",
                    imgPath: require("../../assets/icon/icon_footprint.png"),
                    path: "/user/foot",
                },
                {
                    id: 4,
                    title: "找货服务",
                    imgPath: require("../../assets/icon/icon_findGoods.png"),
                    path: "/user/search_goods",
                },
                {
                    id: 5,
                    title: "金融服务",
                    imgPath: require("../../assets/icon/icon_finance.png"),
                    path: "/user/finance",
                },
            ],
            showPage: true,
            // siteObj: {}
        };
    },
    computed: {
        isClose() {
            return this.$store.state.isClosePoster;
        },
        siteObj() {
            return this.$store.state.siteInfo
        }
    },
    created() {
        this.clientAccessToken = localStorage.getItem('Client-Access-Token') ? localStorage.getItem('Client-Access-Token') : '';
        console.log('this.clientAccessToken', this.clientAccessToken)
        this.getUserInfo();
        // this.getSiteInfo();
    },
    mounted() {
        this.getIndexHeader();
        this.getRecommand();
        console.log('window.localStorage.getItem("IS-CLOSE")', window.localStorage.getItem('IS-CLOSE'));
        this.getRandomPoster();
    },
    methods: {
        /* 
            *首页逻辑
            * toSearchPage() 跳转搜索页面
            * getUserInfo() 获取用户信息
            * getRandomPoster() 获取随机海报
            * getIndexHeader() 获取轮播与分类数据
            * toSwiperPage() 轮播跳转页面事件
            * toCatePage() 跳转分类页面
            * addCart() 弹出商品SKU弹窗
        */
        getUserInfo() {
            const that = this;
            userInfo().then(res => {
                if (res.code == 0) {
                    that.userInfo = res.data;
                } else if (res.code == 101) {
                    this.clientAccessToken = '';
                }
            })
        },
        getRandomPoster() {
            const that = this;
            posterRandom().then(res => {
                if (res.code == 0) {
                    if (res.data) {
                        that.randomPoster = res.data.image;
                        that.randomPosterId = res.data.goods_id;
                        if (window.sessionStorage.getItem('IS-CLOSE')) {
                            this.showModal = false;
                            this.zoomClass = 'zoomOut'
                        } else {
                            this.showModal = true;
                        }
                    }
                }
            })
        },
        getIndexHeader() {
            let that = this;
            indexHeader().then(res => {
                that.showPage = false;
                if (res.code == 0) {
                    that.$nextTick(() => {
                        that.swiperList = res.data.sliderData;
                        setTimeout(() => {
                            if (that.swiperList.length > 1) {
                                var homeSwiper = new Swiper("#topSwiper", {
                                    autoplay: true,
                                    loop: true,
                                    pagination: {
                                        el: ".swiper-pagination",
                                        clickable: true,
                                        renderBullet: function (index, className) {
                                            return (
                                                '<span class="' +
                                                className +
                                                '">' +
                                                (index + 1) +
                                                "</span>"
                                            );
                                        },
                                    },
                                });
                            }
                        }, 100)
                    })
                    res.data.cateData.unshift({
                        image: quicklyBuyImg,
                        category_id: '-1',
                        name: '快速购买'
                    })
                    res.data.cateData.push({
                        image: moreImg,
                        category_id: '0',
                        name: '更多分类'
                    })
                    that.cateList = res.data.cateData
                }
            })
        },
        toSwiperPage(item) {
            let path;
            switch (Number(item.type)) {
                case 1:
                    if (!item.content) {
                        return;
                    }
                    const href = this.$router.resolve({
                        path: `/goods_detail`,
                        query: { goods_id: item.content },
                    }).href;
                    window.open(href, "_blank");
                    break;
                case 2:
                    path = `/activity_detail/${item.id}`;
                    this.$router.push(path);
                    break;
            }

        },
        toCatePage(index, id) {
            let path = ''
            if (id == '-1') {
                this.$router.push({
                    path: '/more_goods_list',
                    query: {
                        type: 2,
                    },
                })
            } else {
                path = `/category/${id}/${this.cateList[index].name}`;
                this.$router.push(path);
            }

        },
        /* 
             *推荐商品部分
             * getRecommand() 获取推荐商品
             * swipeAdv() swiper touch事件
             * toMoreGoodsList() 跳转更多商品列表
             * toGoodsDetail() 跳转商品详情页
             */
        getRecommand() {
            let that = this;
            indexMiddle({
                platform: 2
            }).then(res => {
                if (res.code == 0) {
                    that.advSwiperList = res.data.indexPoster;
                    const indexRecommend = res.data.indexRecommend;
                    const indexRecommendCopy = Array.from(indexRecommend);
                    that.advGoods = res.data.indexRecommend.slice(0, 2);
                    that.recommandList = indexRecommendCopy.splice(2);
                    that.$nextTick(() => {
                        setTimeout(() => {
                            if (that.advSwiperList.length > 1) {
                                var homeSwiper = new Swiper("#advSwiper", {
                                    autoplay: true,
                                    loop: true,
                                    pagination: {
                                        el: ".swiper-pagination",
                                        clickable: true,
                                    },
                                });
                            }
                        }, 100)
                    })
                }
            })
        },
        toMoreGoodsList(id, name) {
            // this.$router.push(`/more_goods_list/${id}/${name}`);
            this.$router.push({
                path: '/more_goods_list',
                query: {
                    id,
                    name,
                    type: 1,
                },
            })
        },
        toGoodsDetail(id, type) {
            if (id == 0) {
                return;
            }
            const href = this.$router.resolve({
                path: `/goods_detail`,
                query: { goods_id: id },
            }).href;
            window.open(href, "_blank");
            if (type == 1) {
                this.close()
            }
        },
        /* 跳转页面 */
        toPage(type) {
            let path = "";
            switch (Number(type)) {
                case 1:
                    path = "/login";
                    break;
                case 2:
                    path = "/user/enterprise_auth";
                    break;
                case 3:
                    if (this.userInfo.is_auth != 1) {
                        this.$router.push('/user/enterprise_auth');
                        return;
                    }
                    path = "/user/order/all";
                    break;
            }
            this.$router.push(path);
        },
        /* 跳转订单 */
        toOrder(index) {
            if (this.userInfo.is_auth != 1) {
                this.$router.push('/user/enterprise_auth');
                return;
            }
            let path = this.orderList[index].path;
            this.$router.push(path);
        },
        /* 跳转常用功能 */
        toElse(index, type) {
            if (this.userInfo.is_auth != 1) {
                this.$router.push('/user/enterprise_auth');
                return;
            }
            let path = "";
            switch (Number(type)) {
                case 1:
                    path = this.elseList[index].path;
                    break;
                case 2:
                    path = this.elseListTwo[index].path;
                    break;
            }
            this.$router.push(path);
        },
        /* 获取底部footer信息 */
        getSiteInfo() {
            const that = this;
            siteInfo().then(res => {
                if (res.code == 0) {
                    // that.siteObj = res.data;
                    this.$store.commit("SET_SITE_INFO", res.data);
                }
            })
        },
        close() {
            this.zoomClass = 'zoomOut';
            setTimeout(() => {
                this.showModal = false;
                window.sessionStorage.setItem('IS-CLOSE', '1')
                // this.$store.commit("SET_POSTER_CLOSE", 1);
                // localStorage.setItem('IS-CLOSE', '1');
            }, 200)
        }
    },
};
</script>
<style>
</style>
<style lang="scss" scoped>
.home-page {
    min-height: 100%;
    background: #fff;
}
.nav-box-wrap {
    width: 100%;
    height: 122px;
}

.nav-box {
    width: 100%;
    height: 122px;
    background: #fff;
    position: fixed;
    left: 0;
    top: 34px;
    z-index: 22;

    .nav-block {
        justify-content: space-between;
        align-items: center;

        .logo-box {
            .logo-img {
                width: 143px;
                height: 101px;
            }
        }

        .search-box {
            width: 738px;
            box-sizing: border-box;
            background: #ffffff;
            align-items: center;
            border-radius: 21px 21px 21px 21px;
            padding: 2px 2px 2px 10px;
            overflow: hidden;
            border: 1px solid var(--main-color);
            gap: 0 10px;

            .ipt {
                width: 700px;
                font-size: 16px;
                border: none;
                outline: none;
            }

            .search-btn {
                width: 72px;
                height: 36px;
                background: var(--main-color);
                border-radius: 18px 18px 18px 18px;
                color: white;
            }
        }

        .void-box {
            width: 155px;
            height: 42px;
            box-sizing: border-box;
        }

        .car-box {
            width: 155px;
            height: 42px;
            box-sizing: border-box;
            background: var(--main-color);
            border-radius: 21px 21px 21px 21px;
            gap: 0 15px;
            border: 1px solid var(--main-color);
            color: white;

            .img {
                width: 21px;
                height: 18px;
            }
        }
    }
}

.cover-box {
    justify-content: space-between;

    .banner-box {
        width: 877px;
        height: 394px;
        border-radius: 12px;
        margin-right: 12px;
        background: #f7f9fa;
        ::v-deep .swiper-pagination-bullet {
            width: 22px !important;
            height: 22px !important;
            background: rgba(0, 0, 0, 0.37) !important;
            border-radius: 100% !important;
            color: #fff;
            font-size: 14px;
            opacity: 1;
            text-align: center;
            line-height: 22px;
        }

        ::v-deep .swiper-pagination-bullet-active {
            background: rgba(0, 0, 0, 1) !important;
        }

        ::v-deep .swiper-pagination {
            text-align: right;
            transform: translate3d(-20px, 0, 0);
        }
        .swiper-container {
            width: 877px;
            height: 394px;
            border-radius: 12px;
        }

        .swiper-wrapper,
        .swiper-slide,
        .swiper-img,
        img {
            width: 877px;
            height: 394px;
            // object-fit: cover;
        }
    }

    .info-box {
        width: 300px;
        box-sizing: border-box;
        padding: 12px 12px 14px 12px;
        border-radius: 12px;
        background-color: #f7f9fa;
        box-sizing: border-box;
        .info-head {
            padding-bottom: 12px;
            height: 105px;
            flex-shrink: 0;
            box-sizing: border-box;
        }

        .h-box {
            height: 1px;
        }

        .wel-box {
            gap: 0 7px;
            color: #323233;

            .avatar-img {
                width: 48px;
                height: 48px;
            }
        }

        .attestation {
            gap: 0 5px;

            .attestation-img {
                width: 48px;
                height: 48px;
            }

            .box {
                gap: 4px 0;

                .text {
                    color: #1a1a1a;
                    font-weight: bold;
                }

                .btn {
                    color: white;
                    min-width: 63px;
                    height: 20px;
                    padding: 0 5px;
                    background: var(--main-color);
                    border-radius: 10px 10px 10px 10px;
                }
            }
        }

        .company {
            gap: 0 3px;
            width: 100%;
            align-items: center;
            .attestation-img {
                width: 48px;
                height: 48px;
            }

            .box {
                width: 100%;

                .name {
                    width: 215px;
                    color: #1a1a1a;
                    flex-shrink: 0;
                }

                .desc {
                    justify-content: start;
                    margin-top: 8px;
                    .attestation-icon {
                        width: 17.8px;
                        height: 14px;
                    }

                    .text {
                        margin-left: 3px;
                        color: #1a1a1a;
                    }
                }
            }
        }

        .login-btn {
            width: 225px;
            height: 36px;
            background: var(--main-color);
            border-radius: 18px 18px 18px 18px;
            color: #ffffff;
            cursor: pointer;
        }

        .nav-head {
            align-items: center;
        }

        .info-nav {
            border-top: 1px solid #dbdbdb;
            border-bottom: 1px solid #dbdbdb;
            padding: 20px 0;

            .title {
                color: #0a0a0a;
                font-weight: bold;
            }

            .text {
                color: #a7a8af;
                &:hover {
                    color: var(--main-color);
                }
            }

            .nav-item {
                gap: 6px 0;
            }

            .nav-img {
                width: 24px;
                height: 24px;
                border-radius: 100%;
                overflow: hidden;
            }

            .nav-text {
                color: #323233;
                &:hover {
                    color: var(--main-color);
                }
            }
        }

        .info-fun {
            height: 100%;
            padding-top: 20px;
            box-sizing: border-box;

            .info-flex {
                width: 100%;
            }

            .fun-item {
                gap: 6px 0;
            }

            .fun-img {
                width: 20px;
                height: 20px;
            }

            .fun-text {
                color: #141617;
                &:hover {
                    color: var(--main-color);
                }
            }
        }
    }
}

.nav-lists {
    display: grid;
    grid-template-columns: repeat(10, 72px);
    justify-content: space-between;
    gap: 50px;
    .nav-item {
        width: 72px;
        .nav-img {
            width: 72px;
            height: 72px;
            border-radius: 100%;
            overflow: hidden;
        }

        .nav-text {
            width: 100%;
            color: #333333;
            padding-top: 8px;
            font-size: 14px;
            text-align: center;
            &:hover {
                color: var(--main-color);
            }
        }
    }
}

.banners-box {
    gap: 0 12px;

    .erect-banner {
        width: 370px;
        height: 534px;
        .swiper-container {
            width: 370px;
            height: 534px;
            border-radius: 12px;
            background: #f7f9fa;
            overflow: hidden;
        }
        .banner-img {
            width: 370px;
            height: 534px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        ::v-deep .swiper-pagination-bullet {
            background: #fff;
            opacity: 0.6;
        }
        ::v-deep .swiper-pagination-bullet-active {
            width: 26px;
            background: #fff;
            opacity: 1;
            border-radius: 4px;
        }
        // ::v-deep .el-carousel__container {
        //     width: 370px;
        //     height: 534px;
        //     border-radius: 12px;
        //     overflow: hidden;
        // }
        // .banner-img {
        //     width: 370px;
        //     height: 534px;
        // }
    }

    .across-banner-box {
        width: 100%;
        gap: 13px 0;

        .across-banner {
            height: 100%;
            border-radius: 8px 8px 8px 8px;
            padding: 16px 12px;
            &:first-of-type {
                background-color: #ffc1c1;
            }
            &:last-of-type {
                background-color: #5dc751;
            }
        }
        .across-banner-item {
            height: 100%;
            border-radius: 8px 8px 8px 8px;
            padding: 16px 12px;
            background: #f7f9fa;
        }

        .banner-head {
            font-size: 18px;
            color: white;
            font-weight: bold;
        }

        .banner-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            justify-content: space-between;
            gap: 10px;
            .banner-item {
                width: 188px;
                height: 188px;
                background-color: white;
                overflow: hidden;
                border-radius: 13px;
                position: relative;

                .goods-img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }

                .bottom-box {
                    font-size: 20px;
                    padding: 8px 0 1px 0;
                    color: white;
                    width: 100%;
                    position: absolute;
                    box-sizing: border-box;
                    left: 0;
                    bottom: 0;
                    z-index: 22;
                    background-image: url("../../assets/img/img_bannerFoot.png");
                }
            }
        }
    }
}

.menu-box {
    margin-top: 6px;

    .menu-head {
        padding: 16px 12px;
        .title {
            color: #333333;
        }

        .more {
            color: #999999;
            i {
                font-weight: bold;
            }
        }
    }

    .menu-list {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-content: space-between;
        gap: 10px;
    }
}

.foot {
    margin-top: 128px;
    background-color: #f6f7f9;
    padding: 14px 0 16px 0;

    .scan-box {
        gap: 0 17px;

        .img-box {
            width: 110px;
            height: 110px;
            background: #ffffff;
            border-radius: 15px 15px 15px 15px;

            .scan-img {
                width: 92px;
                height: 92px;
            }
        }

        .scan-text {
            color: #8f8f8f;
            gap: 8px 0;
            align-items: start;
        }
    }

    .version {
        margin-top: 43px;
    }
}

.mt-8 {
    margin-top: 8px;
}

.mt-9 {
    margin-top: 9px;
}

.mt-12 {
    margin-top: 12px;
}
.poster-modal {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 22;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
}
.modal-show {
    visibility: visible;
    opacity: 1;
}
.poster-modal-wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .modal-img {
        width: 370px;
        height: 534px;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
    }

    .close {
        font-size: 30px;
        color: #fff;
        margin: 20px auto 0;
    }
}
@media screen and (max-width: 1280px) {
    .cover-box {
        justify-content: space-between;

        .banner-box {
            width: 612px;
            height: 394px;
            border-radius: 12px;
            margin-right: 12px;
            .swiper-container {
                width: 612px;
                height: 394px;
                border-radius: 12px;
            }

            .swiper-wrapper,
            .swiper-slide,
            .swiper-img {
                width: 612px;
                height: 394px;
                object-fit: cover;
            }
        }

        .banner-item .banner-img {
            width: 612px;
            height: 394px;
            display: block;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    .banners-box {
        .erect-banner {
            width: 270px;
            height: 434px;
            .swiper-container {
                width: 270px;
                height: 434px;
                border-radius: 10px;
                overflow: hidden;
            }
            .banner-img {
                width: 270px;
                height: 434px;
            }
            ::v-deep .swiper-pagination-bullet {
                background: #fff;
                opacity: 0.6;
            }
            ::v-deep .swiper-pagination-bullet-active {
                width: 26px;
                background: #fff;
                opacity: 1;
                border-radius: 4px;
            }
        }

        .across-banner-box {
            .banner-list {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                justify-content: space-between;
                .banner-item {
                    width: 146px;
                    height: 146px;
                    background-color: white;
                    overflow: hidden;
                    border-radius: 13px;
                    position: relative;

                    .goods-img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
            }
        }
    }
}
</style>